<template>
  <div class="pro-editor-info-container">
    <n-alert type="warning" class="alert-warning">
      <div v-for="info in initProAlertInfo(proAlertInfo)" :key="info">
        <span>{{ info }}</span>
      </div>
    </n-alert>
  </div>
</template>
<script lang="ts" setup name="ProEditorInfo">
  import { transformSize } from '@/utils/file/file'
  import { isString } from 'lodash-es'

  interface editorInfo {
    name: string
    maxNumberOfFiles?: number
    maxFileSize?: number
    allowedFileTypes?: Array<string>
  }
  interface editorInfoList {
    proAlertInfo: Array<editorInfo>
  }
  defineProps<editorInfoList>()

  /**
   * @description 生成图片、视频、文件上传提示信息
   * @param {Array} editorConfigList
   * @return Array 提示信息
   */
  const initProAlertInfo = (editorConfigList) => {
    const getTypeInfo = (allowedFileTypes) => {
      const types = {
        video: '所有视频类型',
        image: '所有图片类型'
      }

      return allowedFileTypes.length && !allowedFileTypes.includes('*')
        ? allowedFileTypes
            .map((type) => {
              if (!type || !isString(type)) return false
              type = type.trim()
              if (/\.([A-Z]{1,})$/.test(type.toLocaleUpperCase()))
                return type.slice(1)
              else if (/([a-z]{1,})(\/\*)$/.test(type.toLocaleLowerCase()))
                return types[type.slice(0, -2)] || false
              else if (
                /([a-z]{1,})\/([a-z]{1,})$/.test(type.toLocaleLowerCase())
              )
                return type.split('/').length && type.split('/')[1]
            })
            .filter(Boolean)
            .join('、')
        : '所有类型'
    }

    const getTemplateParams = (upload) => {
      const { name, maxNumberOfFiles, maxFileSize, allowedFileTypes } = upload
      return {
        name,
        size: transformSize(maxFileSize),
        type: getTypeInfo(allowedFileTypes),
        count: maxNumberOfFiles
      }
    }

    const template = ({ name, size, type, count }) => {
      const n = name && `${name}上传大小限制为：${size}`
      const t = size && `上传类型限制为：${type}`
      const c = count && `上传个数限制为：${count}`
      return [n, t, c].filter(Boolean).join('，')
    }

    const getTemplateResult = (upload) => {
      return template(getTemplateParams(upload))
    }

    const info = editorConfigList.map((editorConfig) => {
      return getTemplateResult(editorConfig)
    })
    return info
  }
</script>
